<template>
  <div class="manage">
    <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" v-model="isShow">
      <common-form :inline="true" :labels="operateLabels" v-model:form="operateForm"></common-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="manage-header">
      <span>
        <el-button type="primary" @click="addUser">新增</el-button>
      </span>
      <span>
        <common-form :labels="formLabel" v-model:form="searchForm" :inline="true">
          <el-button type="primary" @click="getList(1)">搜索</el-button>
        </common-form>
      </span>
    </div>
    <CommonTable
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList"
      @edit="editUser"
      @delete="deleteUser"
    />
  </div>
</template>

<script setup lang="ts">
import CommonForm from '@/components/CommonForm.vue';
import CommonTable from '@/components/CommonTable.vue';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import dayjs from 'dayjs';

const operateType = ref('');
const isShow = ref(false);

const operateLabels = [
  {
    model: 'name',
    label: '姓名',
    type: 'input'
  },
  {
    model: 'age',
    label: '年龄',
    type: 'input'
  },
  {
    model: 'sex',
    label: '性别',
    type: 'select',
    opts: [
      {
        label: '男',
        value: 1
      },
      {
        label: '女',
        value: 0
      }
    ]
  },
  {
    model: 'birth',
    label: '出生日期',
    type: 'date'
  },
  {
    model: 'addr',
    label: '地址',
    type: 'input'
  }
]
let operateForm = reactive({
  name: '',
  addr: '',
  age: '',
  birth: '',
  sex: ''
})
const formLabel = [
  {
    model: 'keyword',
    label: '',
    type: 'input'
  }
]
const searchForm = ref({
  keyword: ''
})
const tableData = reactive([]);
const tableLabel = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'sexNum',
    label: '性别'
  },
  {
    prop: 'birth',
    label: '出生日期',
    width: 200
  },
  {
    prop: 'addr',
    label: '地址',
    width: 320
  }
]
const config = reactive({
  page: 1,
  total: 30,
  loading: false
})
const addUser = () => {
  isShow.value = true;
  Object.keys(operateForm).map(key => operateForm[key] = '');

  operateType.value = 'add';
}
const { proxy } = getCurrentInstance();
const confirm = () => {
  isShow.value = false;
  if (operateType.value === 'add') {
    operateForm.birth = dayjs(operateForm.birth).format('YYYY-MM-DD');
    proxy.axios.post('/user/add', operateForm).then(res => {
      getList(config.page);
      console.log(res.data);
    })
  } else {
    operateForm.birth = dayjs(operateForm.birth).format('YYYY-MM-DD');
    proxy.axios.post('/user/edit', operateForm).then(res => {
      getList(config.page);
      console.log(res.data);
    })
  }
}
onMounted(() => {
  getList(1);
})
const getList = (page: number) => {
  config.loading = true;
  // searchForm.value.keyword ? (config.page = 1) : ''
  proxy.axios.get(`/user/getUserList?name=${searchForm.value.keyword}&page=${page}&limit=10`)
    .then((res) => {
      if (res.status === 200) {
        if (tableData.length > 0) tableData.splice(0, tableData.length); // 清空原来数据
        tableData.push(...res.data.list.map((item) => {
          item.sexNum = item.sex === 0 ? '女' : '男';
          return item;
        }));
        config.total = res.data.count;
        config.loading = false;
      }
    })
}
const editUser = (row: Object) => {
  Object.keys(row).forEach(key => {
    operateForm[key] = row[key];
  })
  operateType.value = 'edit';
  isShow.value = true;
}
const deleteUser = (row: Object) => {
  proxy.axios.delete('/user/delete', { params: { id: row.id } }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'success',
      })
    }
    // console.log(res);
    getList(config.page);
  })
}

</script>

<style lang="less" scoped>
.manage-header {
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: top;
}
</style>